<template>
<!-- v-loading.fullscreen.lock -->
  <div class="remote-storage views-container" v-loading.fullscreen="loading" element-loading-text="上传大致需要2-4分钟，请耐心等待！">
    <el-dialog :append-to-body="true" :visible.sync="dialogVisible" width="30%" custom-class="reset-pwd wlm-form-dialog dialog-table">
      <div class="wlm-form" v-if="dialogVisible">
        <div class="wlm-form-header wlm-dialog-fixheader">
          <span class="wlm-dialog-inlenr">提示</span>
        </div>
        <el-scrollbar wrap-class="scrollbar-wrapper">
          <div class="wlm-form-content">
           上传成功，请到<el-link type="primary" href="https://mp.weixin.qq.com">小程序后台</el-link>预览或提交审核。
          </div>
        </el-scrollbar>
      </div>
      <footer class="flex-row flex-align-c flex-justify-c wlm-dialog-fixfooter">
        <el-button size="text" type="primary" @click="dialogVisible=false">取消</el-button>
        <!-- <el-button size="small" type="primary" :disabled="dialogLoding" :loading="dialogLoding" @click="saveTextarea">采集</el-button> -->
      </footer>
    </el-dialog>
    <div class="wlm-form">
      <div class="wlm-form-header-radio">
        <div class="wlm-form-notice warning" style="margin-left: -41px;margin-top: -10px;">
          <div>
            温情提示：发布小程序之前请先完善小程序信息，修改跳转小程序需重新发布方可生效。
          </div>
        </div>
      </div>
    </div>

    <section class="flex-row flex-warp form-group">
      <el-row>
        <el-col :span="12">
          <div class="wlm-form" style="margin-right:20px;padding-bottom: 50px;" v-loading="formLoading">
            <div class="wlm-form-header flex-row flex-justify-b">
              <p>上次提交版本号<span class="sub-title">版本号:{{formFormatData.formData.edition}}</span></p>
            </div>
            <div class="wlm-form-content">
              <el-form v-if="isOpend" :ref="formFormatData.key" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="120px" class="retail-form" label-position="right">
                <el-form-item label="小程序名称">
                  <span>{{formFormatData.formData.name}}</span>
                </el-form-item>
                <el-form-item label="上次提交时间">
                  <span v-if="formFormatData.formData.update_time">{{formFormatData.formData.update_time | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}</span>
                </el-form-item>
                <el-form-item label="">
                  <img v-if="formFormatData.formData.qr_code" :src="formFormatData.formData.qr_code" class="qr-online">
                </el-form-item>
              </el-form>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="wlm-form" style="margin-left:20px;padding-bottom: 70px;" v-loading="formLoading">
            <div class="wlm-form-header flex-row flex-justify-b">
              <p>最新版本<span class="sub-title">版本号:{{formFormatData.formData.new_edition}}</span></p>
            </div>
            <div class="wlm-form-content">
              <!-- <el-steps v-if="isOpend" :active="step" align-center>
                <el-step title="扫码登陆" description="扫描二维码登录开发者工具"></el-step>
                <el-step title="提交小程序" description="提交最新版本小程序代码"></el-step>
              </el-steps> -->
              <div v-if="isOpend" class="qr-code">
                <!-- <template v-if="loginReady">
                  <div class="img-box">
                    <div v-if="isMask" class="mask" @click="loginQrCode">点击刷新</div>
                    <div class="loading" v-if="uploadReady" v-loading="loadings"></div>
                    <img v-if="loginQr" :src="`${this.qrcode}`" >
                    <img alt v-if="!loginQr" />
                    <p v-if="loginReady && !uploadReady && step != 2">扫描预览二维码</p>
                    <p v-if="uploadReady">您的代码正在上传，请耐心等待</p>
                    <p v-if="step == 2">扫码预览版本，如无问题可提交审核</p>
                  </div>
                </template> -->
                <!-- <div class="flex-row flex-justify-b">
                  <el-button @click="loginQrCode('0')" size="small" v-if="loginToggel" type="primary" class="flex-row flex-justify-c flex-align-c" style="margin: 0 auto;">
                    <svg-icon icon-class="qrcode" style="margin-right:5px;" /> <span>标准上传</span>
                  </el-button>
                  <el-button @click="loginQrCode('1')" size="small" v-if="loginToggel" type="primary" class="flex-row flex-justify-c flex-align-c" style="margin: 0 auto;">
                    <svg-icon icon-class="qrcode" style="margin-right:5px;" /> <span>直播版本上传</span>
                  </el-button>
                </div> -->
                  <div class="flex-row flex-justify-b">
                  <el-button @click="loginQrCode('0')" size="small"  type="primary" class="flex-row flex-justify-c flex-align-c" style="margin: 0 auto;">
                    <svg-icon icon-class="qrcode" style="margin-right:5px;" /> <span>标准上传</span>
                  </el-button>
                  <el-button @click="loginQrCode('1')" size="small"  type="primary" class="flex-row flex-justify-c flex-align-c" style="margin: 0 auto;">
                    <svg-icon icon-class="qrcode" style="margin-right:5px;" /> <span>直播版本上传</span>
                  </el-button>
                </div>

                <!-- <el-progress v-if="uploadReady" ref="progress" :percentage="progressNum" color="#67c23a" style="margin:0 20%;"></el-progress> -->

                <el-button size="small" v-if="step == 2" type="primary" class="flex-row flex-justify-c flex-align-c" style="margin: 20px auto 0;"><a style="padding: 0 10px;margin: 0 -10px;" href="https://mp.weixin.qq.com/cgi-bin/loginpage?t=wxm2-login&lang=zh_CN" title="提交审核" target="_blank">提交审核</a></el-button>
                  <div style="margin-top:20px;"   v-if="tasbatn"><i class="el-icon-circle-check" style="color:#07AF12;font-size:14px;"></i>上传成功，请到<el-link type="primary" href="https://mp.weixin.qq.com">小程序后台</el-link>预览或提交审核。</div>
                <!-- <el-button @click="loginQrCancel" size="small" v-if="!loginToggel && !uploadReady && step != 2" plain class="flex-row flex-justify-c flex-align-c" style="margin: 20px auto 0;">取消</el-button> -->
              </div>
                <!-- <div style="color:red;margin:10px 0 0 110px;font-size:14px;" v-if="loginToggel">上传大致需要2-4分钟，请耐心等待！</div> -->

              <!-- <div class="flex-row flex-justify-c" style="margin:100px 0 0 0;">
                          <el-button  icon="el-icon-download" :data-query="JSON.stringify({type:'aliapp'})" v-exceldown="{path:'AppleApLetDownload&',query: {}}" type="text">您也可以下载代码，导入微信开发者工具提交。</el-button>
                        </div> -->
            </div>
          </div>
        </el-col>
      </el-row>
    </section>
  </div>
</template>

<script>
// import {
//   getEditionInfo,
//   uploadWxAppLogin,
//   uploadWxAppGetLoginInfo,
//   uploadWxAppCode,
//   getPreviewQrCode
// } from '@/api/channel'
import {
  getEditionInfo,
  uploadWxAppGetLoginInfo,
  uploadWxAppCode,
  getPreviewQrCode,
  weChatAppletsUpload,
  weChatAppletsUploadImg
} from '@/api/channel'
import mixins from '@/mixins/mixins'
import exceldown from '@/directive/exceldown'
// import { setInterval, clearInterval } from 'timers'
export default {
  mixins: [mixins.getters('Form')],
  name: 'RemoteStorage',
  components: {

  },
  directives: {
    exceldown
  },
  computed: {
    isOpend() {
      return !!this.open
    },
    uploadReady() {
      return this.upload
    },
    loginQr() {
      return !!this.qrcode
    },
    isMask() {
      return !!this.mask
    }
  },
  data() {
    return {
      //   timer: null,
      btn: 0,
      step: 1,
      tasbatn:false,
      dialogVisible:false,
      loading:false,
      loadings:false,
      formLoading: false,
      open: false,
      upload: false,
      qrCancel: false,
      loginReady: false,
      loginToggel: true,
      //   progressNum: 0,
      qrcode: null,
      mask: null,
      formFormatData: {
        key: ['publish'],
        api: {
          editForm: {
            api: getEditionInfo,
            params: {
              always: true
            }
          }
        },
        formData: {
          edition: '-',
          name: '',
          new_edition: '-',
          qr_code: '',
          update_time: 0
        },
        rules: {

        }
      }
    }
  },
  created() {
    this.formLoading = true
  },
  methods: {
    loginQrCode(code) {
      console.log("999999999",code)
      this.loading = true
      this.loginReady = true
      this.loginToggel = false
      this.qrCancel = false
      this.mask = false
      this.btn = code
      weChatAppletsUpload({
        liveplay: code
      }).then(res => {
        // const { data: { data: { code } } } = res
        console.log("88888888888888",res)
        if (res.data.code==1) {
          this.$message.success('小程序上传成功！正在获取预览二维码，大概需要2-3分钟，请耐心等待...')
          // this.qrcode = qrcode
          // this.getLoginInfo()
          //  this.loadings = true
          //   weChatAppletsUploadImg().then(ites=>{
          //     if(ites.data.code==1){
          //        this.qrcode = ites.data.data
          //        this.$message.success('预览二维码获取成功，请扫码查看！')
          //     }else{
          //        this.$message.error(res.data.msg)
          //     }
          //   }).finally(()=>{
          //     this.loading = false
          //   })
          this.loading = false
          this.dialogVisible = true
          this.tasbatn = true
        }else{
          this.$message.error(res.data.msg)
           this.loading = false
        }
      }).catch(()=>{
        this.loading = false
      })
 
    },
    // getLoginInfo() {
    //   console.log('this.ddddddddddddddddddddddddddd', this.btn)
    //   uploadWxAppGetLoginInfo({ liveplay: this.btn }).then(resinfo => {
    //     const { data: { code, data: { status } } } = resinfo
    //     if (status !== 0) {
    //       if (code === 0) {
    //         this.mask = true
    //         console.log(code, 'resinfo')
    //       } else if (!this.qrCancel) {
    //         this.getLoginInfo()
    //       }
    //     } else {
    //       this.upload = true
    //       uploadWxAppCode({ liveplay: this.btn }).then(resup => {
    //         const { data: { code, data: { version }, msg } } = resup
         
    //         if (!this.qrCancel) {
    //           if (code === 1) {
    //             this.formFormatData.formData.new_edition = version
    //             console.log('code === getPreviewQrCode')
    //             getPreviewQrCode({ liveplay: this.btn }).then(resqr => {
    //               console.log(resqr, 'code === 1')
    //               const { data: { code: resCode, data: { code: qrMsgCode, data: { qrcode }, msg } } } = resqr
    //               if (resCode === 1 && qrMsgCode === 0) {
    //                 this.qrcode = qrcode
    //                 this.step = 2
    //                 this.$message.success(msg)
    //               } else {
    //                 this.$message.error(msg)
    //               }
    //               this.upload = false
    //             }).catch(() => {
    //               this.upload = false
    //             })
    //           } else {
    //             this.$message.error(msg)
    //           }
    //         }
    //         // const { data: { code, data: { status }}} = resup
    //       }).catch(() => {
    //         this.upload = false
    //       })
    //     }
    //   })
    // },
    // progressCount() {
    //   const _this = this
    //   new Promise((resolve, reject) => {
    //     clearInterval(_this.timer)
    //     _this.upload = true
    //     _this.timer = setInterval(res => {
    //       if (_this.progressNum < 100) {
    //         _this.progressNum += 1
    //       } else {
    //         clearInterval(_this.timer)
    //         // _this.$refs.progress.status = 'success'
    //         resolve()
    //       }
    //     }, 10)
    //   })
    // },
    formFormatCallBack(data, type, response) {
      if (type === 'editForm') {
        this.formLoading = false
        const { data: { data: { name = '' } } } = response
        this.open = name
        if (!this.isOpend) {
          this.$confirm('您还未完善小程序设置，请先完善信息后再查看~!', '消息', {
            confirmButtonText: '确定',
            showCancelButton: false,
            type: 'warning'
          }).then(() => {
            this.$router.push({ path: '/channel/weChatAppletsChannel' })
          }).catch(res => {

          })
        }
      }
    },
    loginQrCancel() {
      this.loginToggel = true
      this.loginReady = false
      this.qrCancel = true
    }
  },
  destroyed() {
    console.log(this.qrCancel, 'this.qrCancel')
    this.qrCancel = true
  }
}
</script>

<style lang="scss">
.remote-storage {
  .form-group {
    .el-row {
      width: 100%;

      .el-col,
      .wlm-form {
        height: 430px;
      }
      /deep/ .el-step__head {
        .el-step__line {
          left: 80%;
          right: -10%;
          height: 1px;
          i {
            border-width: 0 !important;
          }
        }
        &.is-finish .el-step__line {
          background: #999 !important;
        }
      }

      /deep/ .el-step__icon-inner {
        font-weight: normal;
        font-size: 12px;
        color: #666666;
      }

      /deep/ .el-step__icon {
        background: rgb(255, 247, 245);
        border-color: transparent;
      }

      /deep/ .el-step__head {
        zoom: 1.6;
      }

      /deep/ .el-step__title {
        font-size: 14px;
        color: #333333;
      }

      /deep/ .el-step__description {
        font-size: 14px;
        color: #999;

        &:not(.is-finish) {
          color: #999;
        }
      }

      .qr-code {
        position: relative;
        text-align: center;
        width: 100%;
        margin-top: 35px;

        .mask {
          position: absolute;
          top: 0;
          right: 0;
          left: 0;
          right: 0;
          width: 100px;
          height: 100px;
          background: rgba(0, 0, 0, 0.8);
          color: white;
          font-weight: bold;
          text-align: center;
          cursor: pointer;
        }

        .loading {
          position: absolute;
          top: 0;
          right: 0;
          left: 0;
          right: 0;
          width: 100px;
          height: 100px;
          text-align: center;
        }

        p {
          font-size: 12px;
        }

        .img-box {
          position: relative;
          width: 100px;
          margin: 0 auto;
          img {
            margin-bottom: 20px;
            width: 100%;
            height: 100px;
          }
        }
      }

      .qr-online {
        width: 160px;
        height: 160px;
      }
    }
  }
}
</style>
